<template>
    <div class="maincontent">
        <el-form label-position="right" :model="form" label-width="80px">
            <div class="maintitle">
                <div class="stepnumber">1</div>
                <div class="title">前期测绘机构选取方式</div>
            </div>
            <div class="formcontent">
                <el-form-item label="选取方式" label-width="121px">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option label="公开招标" value="shanghai"></el-option>
                        <el-option label="非公开" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="招标文件" label-width="121px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="采购文件" label-width="121px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="抽取公告" label-width="121px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
            </div>
            <div class="maintitle" style="margin-top:60px;">
                <div class="stepnumber" style="opacity:0.7;">2</div>
                <div class="title">前期测绘机构名称</div>
            </div>
            <div class="formcontent">
                <el-form-item label="选择单位/公司" label-width="153px">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option label="公开招标" value="shanghai"></el-option>
                        <el-option label="非公开" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="中标通知书" label-width="153px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="中选/标通知书" label-width="153px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="抽取结果公告" label-width="153px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
            </div>
            <div class="maintitle" style="margin-top:60px;">
                <div class="stepnumber" style="opacity:0.7;">3</div>
                <div class="title">合同信息</div>
            </div>
            <div class="formcontent">
                <el-form-item label="已签订的合同" label-width="148px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
            </div>
            <div style="margin-top:40px;">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>  
            </div>
        </el-form>
        
        
        
    </div>
</template>

<script>
import process from "../public/process"
export default {
    components:{
        process:process
    },
    data() {
        return {
            form:{
                type:"shanghai"
            },
            fileList:[],
        };
    },
    
    created() {
        
    },
    methods: {
        onSubmit(){

        },
        getreport(response, file, fileList){
            this.fileList = [];
            this.fileList.push(file)
        }
    }
};
</script>

<style lang="scss" scoped>
    .maincontent{
        margin: 10px;
        box-sizing: border-box;
        background: #ffffff;
        padding: 20px;
        .maintitle{
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            .stepnumber{
                width:32px;
                height:32px;
                background: #2E8AE6;
                text-align: center;
                line-height: 32px;
                border-radius: 100px;
                font-size:18px;
                font-family:Helvetica;
                color: #ffffff;
            }
            .title{
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                margin-left: 20px;
                font-size:16px;
                font-family:PingFang SC;
                font-weight:400;
                color: #333333;
            }
        }
        



        .formcontent{
            margin-top: 30px;
            
        }
        
    }
</style>